<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<Hearder :name="'资金明细'"></Hearder>
		<!-- #endif -->
		<view class="v_one guncc">
			<view class="v_two">
				<view :class="type==0 ? 'v_three fw600' : 'v_three' " @click="change(1)">收入<view :class="type==1 ? 'cc' : ''"></view></view>
				<view :class="type==1 ? 'v_three fw600' : 'v_three' " @click="change(2)">支出<view :class="type==2 ? 'cc' : ''"></view></view>
			</view>
		</view>
		<view style="width: 1rpx;height: 80rpx;"></view>
		<view class="v_four">
			<view class="v_five" v-for="(item,index) in listData" :key="item.id">
				<view class="v_six">
					<view>{{item.remarks}}</view>
					<view>{{item.create_time}}</view>
				</view>
				<view class="v_seven">{{item.face_value}}</view>
			</view>
		</view>
		<u-skeleton
			rows="4"
			:title="false"
			:loading="loading"
			:rowsHeight="['102rpx', '706rpx', '100rpx', '200rpx']"
			:rowsWidth="['100%', '100%', '100%', '100%']"
			animate
		></u-skeleton>
		<view class="nidata" v-if="listData.length==0">
			<image src="../../static/images/noimg.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:1,
				listData:[],
				page:1,
				loading:true
			}
		},
		onShow() {
			this.page = 1
			this.listData = []
			this.getData();
		},
		onReachBottom() {
			this.page++;
			this.getData();
		},
		methods: {
			getData() {
				this.request('/team/capitalDetail', {
					type: this.type,
					page:this.page
				}).then(res => {
					if (res.data.code == 1) {
						this.listData = this.listData.concat(res.data.data)
					}
					this.loading = false;
				})
			},
			change(e){
				this.type = e
				this.page = 1
				this.listData = []
				this.getData()
			}
		}
	}
</script>

<style lang="scss">
	.guncc{
		position: fixed;
		width: 100%;z-index: 9;
		background-color: #fff;
		border-bottom: 1rpx solid #f8f8f8;
		/* #ifndef APP-PLUS */
		top: 0rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		top: 148rpx;
		/* #endif */
		
	}
	.v_four{
		padding: 0rpx 24rpx;
		.v_five{
			padding: 30rpx 0rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #eeeeee;
			.v_six{
				>view{
					&:first-of-type{
						font-size: 28rpx;
					}
					&:last-of-type{
						font-size: 24rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				}
			}
			.v_seven{
				font-size: 38rpx;
				color: #EF3800;
			}
		}
	}
	.fw600{
		font-weight: 600;
	}
     .v_one{
		 padding: 20rpx 0rpx;
		 .v_two{
			 position: relative;
			 display: flex;
			 justify-content: space-around;
			 .v_three{
				 font-size: 32rpx;
				 position: relative;
			 }
			 .cc{
				 font-weight: 600;
			 }
			 .cc::before{
				 content: "";
				 position: absolute;
				 left:50%;
				 top: 54rpx;
				 width: 56rpx;
				 height: 6rpx;
				 background-color: $uni-text-color;
				 transform: translateX(-50%);
			 }
		 }
	 }
</style>
